<template>
	<sl-pageComplete :isDisplay="false" title=" " :pageObject="order" :isLoading="isLoading">
		<view class="nav-bar-box" @click="backNav" :style="'margin-top:' +statusBarHeight+'px'">
			<view class="bar-box-item">
				<uni-icons type="left" size="23"></uni-icons>
				<text class="bar-box-title" :class="(flowState =='待付款')?'limit':''">{{flowState}}</text>
			</view>
			<text v-if="flowState =='待付款'"  class="limit-time-box">剩余{{count}}自动取消</text>
		</view>
		<view class="detail">
			<!-- 物流信息 -->
			<block v-if="isDelivery && flowState !=='待付款' && flowState !=='已付款'&& flowState !=='已取消'">
				<view class="detail-address">
					<view class="flex">
						<view class="flex flex-basis-10">
							<uni-icons type="location"></uni-icons>
						</view>
						<view class="flex">
							<view class="">
								物流单号
							</view>
							<view v-if="orderInfo.trackingNo">
								{{ orderInfo.trackingNo }}
							</view>
							<view v-else>
								暂无单号
							</view>
						</view>
					</view>
				</view>
				<!-- 快递配送：配送地址 -->
				<view class="detail-address">
					<view class="flex flex-x-between">
						<view class="flex flex-basis-10">
							<uni-icons type="location"></uni-icons>
						</view>
						<view class="flex flex-column flex-basis-90">
							<view>
								{{ orderInfo.areaName }}
							</view>
							<view class="flex f-w">
								{{ orderInfo.address }}
							</view>
							<view class="flex">
								<text>{{ orderInfo.consignee }}</text>
								<text class="px-1">{{ orderInfo.phone }}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="isPickUp">
				<view class="detai_common">
					<view class="flex">
						<view class="w-25">自提单号：</view>
						<view class="w-75">
							<view>{{ orderInfo.checkOffNo }}</view>
						</view>
					</view>
				</view>
				<view class="detai_common">
					<view class="flex">
						<view class="w-25">门店地址：</view>
						<view class="flex w-75">
							<view>{{ orderInfo.storeName }}</view>
							<view>{{ orderInfo.storeAddress }}</view>
						</view>
					</view>
				</view>
			</block>
			<!-- 商品详情 -->
			<view class="detail-goods" v-for="(goods, index) in order.items" :key="index">
				<view class="flex flex-y-center">
					<Tag tagName="旗舰"
						customBackground="linear-gradient(180deg, #422A01 0%, #838383 0.01%, #2D251C 100%)">
					</Tag>
					<view class="f-w">{{ goods.tenantName }}</view>
				</view>
				<view class="flex" @click="toGoodsDetail(goods.productId)">
					<view class="goods-image">
						<sl-image :value="goods.productImage"></sl-image>
					</view>
					<view class="flex py-1">
						<view class="flex-column">
							<view class="">{{ goods.productName }}：</view>
							<view class="f-tip">共{{ goods.quantity }}件</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单金额 -->
			<view class="detail-money">
				<view class="flex flex-x-between py-1">
					<view class="">订单金额：</view>
					<view class="">
						<Money :priceValue="orderInfo.price"></Money>
					</view>
				</view>
				<view class="flex flex-x-between py-1">
					<view class="">运费：</view>
					<view class="" v-if="orderInfo.freight != 0">
						<Money :priceValue="orderInfo.freight"></Money>
					</view>
					<view class="" v-else>
						快递包邮
					</view>
				</view>
				<view class="flex flex-x-between py-1">
					<text class="">优惠券：</text>
					<view class="" v-if="orderInfo.amount != 0">
						<Money :priceValue="orderInfo.amount"></Money>
					</view>
					<view class="" v-else>
						最佳优惠
					</view>
				</view>
				<view class="flex flex-x-between py-1">
					<text class="">实付款：</text>
					<view class="">
						<Money :priceValue="orderInfo.amount"></Money>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="details">
				<view class="flex flex-x-between py-1">
					<view class="">订单编号：</view>
					<view class="">
						{{ orderInfo.sn }}
						<text
							style="border: 1px solid #999; margin-left: 12rpx; padding: 0rpx 18rpx; border-radius: 1rem;"
							@click="handleCopy(orderInfo.sn)">复制</text>
					</view>
				</view>
				<view class="flex flex-x-between py-1">
					<view class="">订单时间：</view>
					<view class="">
						{{ orderInfo.createDate }}
					</view>
				</view>
				<view class="flex flex-x-between py-1">
					<view class="">支付时间：</view>
					<view class="">
						{{ orderInfo.paymentDate ? orderInfo.paymentDate : '--' }}
					</view>
				</view>
				<view class="flex flex-x-between py-1" >
					<view class="">支付方式：</view>
					<view class="">
						{{ orderInfo.paymentMethodName || "" }}
					</view>
				</view>
				<view class="flex flex-x-between py-1">
					<view class="">买家留言：</view>
					<view class="">
						{{ orderInfo.remarks ? orderInfo.remarks : '--' }}
					</view>
				</view>
			</view>
			<!-- 结算信息 -->
			<sl-flooter>
				<view class="flex flex-x-end px-1">
					<Operate :orderId="orderInfo.id" :cancelAble="order.cancelAble" :paymentAble="order.paymentAble"
						:refundAble="order.applyRefundAble" :returnAble="order.applyReturnAble"
						:receiptAble="order.receiptAble" @onCancel:result="toast" @onPay:result="onPay"
						@onRefund:result="toast" @onReturn:result="toast" @onReceipt:result="toast"></Operate>
				</view>
			</sl-flooter>
		</view>
	</sl-pageComplete>
</template>

<script>
	import OrderApi from '@/api/order/order.js';
	import ShippingMethod from '@/utils/order/ShippingMethod.js';
	import Constants from '@/constants';
	import Operate from '@/pages/components/order/operate/operate.vue';
	import Money from '@/pages/components/money/money.vue';
	import Tag from '@/pages/components/tag/tag.vue';

	export default {
		//
		name: 'orderDetail',
		//
		mixins: [Constants],
		//
		components: {
			Money,
			Operate,
			Tag
		},
		beforeDestroy(){
			clearInterval(this.intervalCount)
			this.intervalCount = null;
		},
		//
		data() {
			return {
				//当前页面参数
				options: {},
				//加载中
				isLoading: true,
				//订单状态
				flowState: '',
				//订单Id
				orderId: '',
				//订单
				order: {},
				count:'',
				intervalCount:null,
				//订单明细
				orderInfo: {},
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight
			};
		},
		//
		computed: {
			//快递
			isDelivery: function() {
				return this.orderInfo.shippingMethod == ShippingMethod.getValueByKey('DELIVERY');
			},
			//自提
			isPickUp: function() {
				return this.orderInfo.shippingMethod == ShippingMethod.getValueByKey('SELFPICKUP');
			},
		},
		//
		onLoad({
			orderId
		}) {
			this.orderId = orderId;
			this.onRefreshPage();
			
		},
		//
		onShow() {},
		//
		methods: {
			//页面数据
			onRefreshPage: async function() {
				const app = this;
				app.isLoading = true;
				Promise.all([app.getOrder()])
					.then(result => {
						this.intervalCount = setInterval(()=>{
							this.getTime()
						},1000)
						// this.initPaymentMethod()
					})
					.catch(err => console.error('【orderDetail:onRefreshPage】:', err))
					.finally(() => (app.isLoading = false));
			},
			//返回上一级菜单
			backNav(){
				uni.navigateBack()
			},
			//获取订单创建时间算出失效时间
			getTime(){
				const timeLimit = new Date(this.orderInfo.createDate).getTime() - new Date().getTime() +1000*30*60 ;
				if(timeLimit>0){
					this.count = new Date(timeLimit).getMinutes() +'分'+new Date(timeLimit).getSeconds()+'秒';
				}else{
					clearInterval(this.intervalCount)
					this.intervalCount = null;
					this.count = '0分0秒';
				}
				// const Seconds = ;
				// const Seconds = new Date(timeLimit).getMinutes();
			},
			//获取当前订单信息
			getOrder: async function() {
				const res = await OrderApi.get(this.orderId);
				this.order = res.obj;
				this.orderInfo = res.obj.order;
				this.flowState = res.obj.order.flowState;
			},
			//复制
			handleCopy(value) {
				const app = this;
				uni.setClipboardData({
					data: value,
					success() {
						app.$app.toast('复制成功');
					}
				});
			},
			//支付
			onPay(result) {
				// this.payDialog.paymentPrepare = {
				// 	id: result.id
				// };
				// this.payDialog.visible = true;
			},
			//处理支付回调
			handlePayResult: function(success) {
				if (success) {
					this.getOrderDetail();
				}
			},
			//订单操作提示
			toast(result) {
				if (result.success) {
					this.$app.toast(result.msg + '订单成功');
					this.getOrderDetail();
				} else {
					this.$app.toast(result.msg + '订单失败');
				}
			},
			//跳转到商品详情页面
			toGoodsDetail(goodsId) {
				console.log(goodsId,'goodsId')
				this.$app.navTo(this.pages.goodsDetailPage, {
					goodsId
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bar-box-item{
		display: flex;
		align-items: center;
		.bar-box-title{
			font-size: 39rpx;
			margin: 0rpx 10rpx;
		}

	}
	
	.limit{
		color: #F7441D;
	}
	.limit-time-box{
		color: #F7441D;
		font-size: 20rpx;
		margin-left: 55rpx;
	}
	.detail {
		font-size: $uni-font-size-base;
		margin-left: 16rpx;
		margin-right: 16rpx;
		
		.detail-address {
			background: $uni-bg-color;
			border-radius: $xj-standard-border-radius;
			padding: $xj-standard-padding;
			margin-top: 16rpx;
		}

		.detail-goods {
			height: 240rpx;
			background: $uni-bg-color;
			padding: $xj-standard-padding;
			border-radius: $xj-standard-border-radius;
			margin-top: 16rpx;

			.goods-image {
				position: relative;
				width: 128rpx;
				height: 128rpx;
				overflow: hidden;
				background: $uni-bg-color;
				margin-top: 24rpx;
				margin-right: 20rpx;
			}
		}

		.detail-money {
			display: flex;
			flex-direction: column;
			background: $uni-bg-color;
			border-radius: $xj-standard-border-radius;
			padding: $xj-standard-padding;
			margin-top: 24rpx;
		}

		.details {
			display: flex;
			flex-direction: column;
			background: $uni-bg-color;
			border-radius: $xj-standard-border-radius;
			padding: $xj-standard-padding;
			margin-top: 24rpx;
		}
	}
</style>